<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，A simple and flexible front-end framework。">
<meta name="author" content="Zentao">
<title>ZUI - Data table example</title>
<link href="../../dist/css/zui.css" rel="stylesheet">
<link href="../../dist/lib/datatable/zui.datatable.css" rel="stylesheet">
</head>

<body style="padding: 20px">
  <div id="datatable" class="datatable">
  </div>

<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../../dist/lib/selectable/zui.selectable.js"></script>
<script src="../../dist/lib/datatable/zui.datatable.js"></script>
<script>
$(function() {
  var now = new Date();
  var start = now.getSeconds(),
      calendars = ['success', 'danger', 'important', 'warning', 'info', 'specail', 'primary'],
      rooms = ['A003', 'A004', 'A010', 'A143', 'B008', 'B098', 'B487', 'B340', 'Z000', 'Z431', 'Z018', 'Z864'],
      peoples = ['Altman', 'Walker', 'Geoscientist', 'Hulk', 'Catouse', 'Passerby C'],
      events = ['Eating', 'Drink water', 'chat', 'go to bed', 'Beat the wall', 'Self-talk', 'Moving the chair', 'Sing', 'Internet access', 'Sleepwalking', 'Watching the ceiling'],
      eventsTypes = ['happy', 'sad', ':]'],
      tools = ['table', 'chair', 'Water cup', 'gun', 'Follower'],
      descs = ['not done', 'This time failed', 'In vain', 'very satisfied', 'Prohibit recurrence', 'also', 'Unknown situation', 'Found unknown signs'];
  var dtDataGenerater = function(rowsCount) {
      var data = {
          cols: [
              {width: 100, text: '#', type: 'number', flex: false, colClass: 'text-center'},
              {sort: 'down', width: 160, text: 'time', type: 'date', flex: false, colClass: ''},
              {width: 80, text: 'room', type: 'string', flex: false, colClass: ''},
              {width: 100, text: 'character', type: 'string', flex: false, colClass: ''},
              {width: 'auto', text: 'event', type: 'string', flex: false, colClass: ''},
              {width: 100, text: 'Event type', type: 'string', flex: true, colClass: 'text-center'},
              {sort: false, width: 200, text: 'description', type: 'string', flex: true, colClass: ''},
              {width: 100, text: 'Related person', type: 'string', flex: true, colClass: ''},
              {width: 100, text: 'Related items', type: 'string', flex: true, colClass: ''},
              {width: 60, text: 'score', type: 'number', flex: false, colClass: 'text-center text-important'},
              {sort: false, width: 'auto', text: 'operating', type: 'string', flex: false, colClass: ''},
          ],
          rows: []
      };

      for (var i = 0; i < rowsCount; i++) {
          var row = {checked: Math.random() > 0.9, data: [
              start + i + 101000,
              now.format('yyyy-MM-dd hh:mm:ss'),
              rooms[Math.floor(Math.random()*rooms.length)],
              peoples[Math.floor(Math.random()*peoples.length)],
              events[Math.floor(Math.random()*events.length)],
              eventsTypes[Math.floor(Math.random()*eventsTypes.length)],
              descs[Math.floor(Math.random()*descs.length)],
              peoples[Math.floor(Math.random()*peoples.length)],
              tools[Math.floor(Math.random()*tools.length)],
              Math.floor(Math.random()*100)/10,
              "<a href='###'><i class='icon-ok-sign'></i></a> &nbsp; <a href='###' class='text-danger'><i class='icon-trash'></i></a> "
          ]};
          data.rows.push(row);
          now = new Date(now.getTime() - (Math.random()*1000*60*60));
      };

      return data;
  };

  var datatable = $('.datatable').each(function() {
      var $this = $(this);
      var data = dtDataGenerater($this.data('rows') || 5);
      if($this.attr('id') === 'datatableChangeExample') {
          $this.data('origin-data', data);
      }
      $this.datatable({
        fixedLeftWidth: '60%',
        fixedRightWidth: '15%',
        data: data,
        scrollContainer: '#pageBody',
        fixedHeaderOffset: 60,
        sortable: true,
        checkable: true
      });
  }).data('zui.datatable');

  console.log('datatable', datatable);
});
</script>
</body>
</html>
